﻿
var tuan = ["Thứ 2", "Thứ 3", "Thứ 4", "Thứ 5", "Thứ 6", "Thứ 7"];
var thang = ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"];

var randomColorFactor = function () {
    return Math.round(Math.random() * 255);
};
var randomColor = function (opacity) {
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.8') + ')';
};
$("#ddl_class").on("change", function () {
    var cls = document.getElementById("ddl_class").value;
    var id = document.getElementById("class-report-Sesmester").value;
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("report_chart_data").innerHTML = xhttp.responseText;
            document.getElementById("canvas_container").innerHTML = "";
            document.getElementById("canvas_container").innerHTML = '<canvas id="canvas1"></canvas>';
            var labels_child = document.getElementsByClassName("report_name_child");
            var data_child = document.getElementsByClassName("report_data_child");
            var data_text = document.getElementById("report_text").innerHTML;
            var chart_labels = [];
            var chart_data = [];
            for (var i = 0; i < labels_child.length; i++)
            {
                chart_labels.push(labels_child[i].innerHTML);
                chart_data.push(data_child[i].innerHTML);
            }
            
            var config1 = {
                type: 'line',
                data: {
                    labels: chart_labels,
                    datasets: [{
                        label: "Điểm trung bình",
                        data: chart_data,
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: data_text
                    },
                    tooltips: {
                        mode: 'label',
                    },
                    hover: {
                        mode: 'label'
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'BÀI KIỂM TRA'
                            }
                        }],
                        yAxes: [{
                            stacked: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'ĐIỂM TRUNG BÌNH'
                            }
                        }]
                    }
                }
            };
            $.each(config1.data.datasets, function (i, dataset) {
                var color = randomColor(0);
                dataset.borderColor = color;
                dataset.backgroundColor = color;
                dataset.pointBorderColor = color;
                dataset.pointBackgroundColor = color;
                dataset.pointBorderWidth = 1;
            });
            var ctx1 = document.getElementById("canvas1").getContext("2d");
            window.myLine = new Chart(ctx1, config1);
        }
    };
    xhttp.open("GET", "../ajax/asp/class/get_report_average_score.aspx?cls="+cls+"&id="+id, true);
    xhttp.send();

    //$("#canvas2").css("display", "none");
    //$("#canvas3").css("display", "none");
});
$("#btn_class_load_chart").on("click", function () {
    var cls = document.getElementById("ddl_class").value;
    var id = document.getElementById("class-report-Sesmester").value;
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("report_chart_data").innerHTML = xhttp.responseText;
            document.getElementById("canvas_container").innerHTML = "";
            document.getElementById("canvas_container").innerHTML = '<canvas id="canvas1"></canvas>';
            var labels_child = document.getElementsByClassName("report_name_child");
            var data_child = document.getElementsByClassName("report_data_child");
            var data_text = document.getElementById("report_text").innerHTML;
            var chart_labels = [];
            var chart_data = [];
            for (var i = 0; i < labels_child.length; i++) {
                chart_labels.push(labels_child[i].innerHTML);
                chart_data.push(data_child[i].innerHTML);
            }

            var config1 = {
                type: 'line',
                data: {
                    labels: chart_labels,
                    datasets: [{
                        label: "Điểm trung bình",
                        data: chart_data,
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: data_text
                    },
                    tooltips: {
                        mode: 'label',
                    },
                    hover: {
                        mode: 'label'
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'BÀI KIỂM TRA'
                            }
                        }],
                        yAxes: [{
                            stacked: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'ĐIỂM TRUNG BÌNH'
                            }
                        }]
                    }
                }
            };
            $.each(config1.data.datasets, function (i, dataset) {
                var color = randomColor(0);
                dataset.borderColor = color;
                dataset.backgroundColor = color;
                dataset.pointBorderColor = color;
                dataset.pointBackgroundColor = color;
                dataset.pointBorderWidth = 1;
            });
            var ctx1 = document.getElementById("canvas1").getContext("2d");
            window.myLine = new Chart(ctx1, config1);
        }
    };
    xhttp.open("GET", "../ajax/asp/class/get_report_average_score.aspx?cls=" + cls + "&id=" + id, true);
    xhttp.send();

})